<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 简单商城</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="auth.css">
    <style>
        .cart-container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .cart-empty {
            text-align: center;
            padding: 3rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .cart-item {
            display: grid;
            grid-template-columns: 100px 2fr 1fr 1fr 100px;
            gap: 1rem;
            align-items: center;
            background: white;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .cart-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .quantity-control button {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .quantity-control button:hover {
            background: #f0f0f0;
        }

        .delete-btn {
            color: #e74c3c;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0.5rem;
        }

        .delete-btn:hover {
            text-decoration: underline;
        }

        .cart-summary {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 2rem;
            text-align: right;
        }

        .total-price {
            font-size: 1.5rem;
            color: #e74c3c;
            font-weight: bold;
        }

        .checkout-btn {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 4px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 1rem;
        }

        .checkout-btn:hover {
            background: #27ae60;
        }
    </style>
</head>
<body>
    <div class="user-status" id="userStatus">
        <!-- 用户状态将通过JavaScript动态更新 -->
    </div>
    <header>
        <h1>简单商城</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="login.html" id="loginLink">登录</a>
            <a href="register.html" id="registerLink">注册</a>
            <a href="cart.html" id="cartLink" class="cart-link" style="display: none;">
                购物车 <span class="cart-count">0</span>
            </a>
        </nav>
    </header>

    <main class="cart-container" id="cartContainer">
        <!-- 购物车内容将通过JavaScript动态生成 -->
    </main>

    <footer>
        <p>© 2025 简单商城 - 示例项目</p>
    </footer>

    <script>
        // 更新用户状态显示
        function updateUserStatus() {
            const currentUser = localStorage.getItem('currentUser');
            const userStatus = document.getElementById('userStatus');
            const loginLink = document.getElementById('loginLink');
            const registerLink = document.getElementById('registerLink');
            const cartLink = document.getElementById('cartLink');

            if (currentUser) {
                userStatus.innerHTML = `
                    <span>欢迎，${currentUser}</span>
                    <button onclick="handleLogout()">退出登录</button>
                `;
                loginLink.style.display = 'none';
                registerLink.style.display = 'none';
                cartLink.style.display = 'inline';
            } else {
                userStatus.innerHTML = `
                    <span>游客，请登录</span>
                `;
                loginLink.style.display = 'inline';
                registerLink.style.display = 'inline';
                cartLink.style.display = 'none';
                window.location.href = 'login.html';
            }
        }

        // 获取购物车数据
        function getCart() {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return {};
            
            const cartData = localStorage.getItem(`cart_${currentUser}`);
            return cartData ? JSON.parse(cartData) : {};
        }

        // 保存购物车数据
        function saveCart(cart) {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return;
            
            localStorage.setItem(`cart_${currentUser}`, JSON.stringify(cart));
            updateCartDisplay();
        }

        // 更新购物车显示
        function updateCartDisplay() {
            const cart = getCart();
            const container = document.getElementById('cartContainer');
            const items = Object.entries(cart);
            
            if (items.length === 0) {
                container.innerHTML = `
                    <div class="cart-empty">
                        <h2>购物车是空的</h2>
                        <p>去 <a href="index.html">商城首页</a> 挑选商品吧！</p>
                    </div>
                `;
                return;
            }

            let totalPrice = 0;
            let cartHtml = '';

            items.forEach(([productId, item]) => {
                const itemTotal = item.price * item.quantity;
                totalPrice += itemTotal;

                cartHtml += `
                    <div class="cart-item" data-id="${productId}">
                        <img src="${item.image}" alt="${item.name}">
                        <h3>${item.name}</h3>
                        <div class="quantity-control">
                            <button onclick="updateQuantity('${productId}', -1)">-</button>
                            <span>${item.quantity}</span>
                            <button onclick="updateQuantity('${productId}', 1)">+</button>
                        </div>
                        <div class="price">¥${(item.price * item.quantity).toFixed(2)}</div>
                        <button class="delete-btn" onclick="removeItem('${productId}')">删除</button>
                    </div>
                `;
            });

            cartHtml += `
                <div class="cart-summary">
                    <div class="total-price">总计：¥${totalPrice.toFixed(2)}</div>
                    <button class="checkout-btn" onclick="handleCheckout()">结算</button>
                </div>
            `;

            container.innerHTML = cartHtml;
            
            // 更新购物车数量显示
            const count = items.reduce((total, [_, item]) => total + item.quantity, 0);
            const cartCount = document.querySelector('.cart-count');
            if (cartCount) {
                cartCount.textContent = count;
            }
        }

        // 更新商品数量
        function updateQuantity(productId, change) {
            const cart = getCart();
            if (!cart[productId]) return;

            cart[productId].quantity += change;
            
            if (cart[productId].quantity <= 0) {
                delete cart[productId];
            }
            
            saveCart(cart);
        }

        // 删除商品
        function removeItem(productId) {
            const cart = getCart();
            delete cart[productId];
            saveCart(cart);
        }

        // 处理结算
        function handleCheckout() {
            alert('结算功能正在开发中...');
        }

        // 处理退出登录
        function handleLogout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }

        // 页面加载时更新显示
        window.onload = function() {
            updateUserStatus();
            updateCartDisplay();
        }
    </script>
</body>
</html>